<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height: 1500px;
				width: 2500px;
			}
			#box{
				position: relative;
				background: #F00;
				height: 100px;
				width: 100px;
			}	
			#span{
				display: inline-block;
			}
		</style>
		<script>
			/* 不兼容IE8
			window.onload = function(){
				var oDiv = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					
					var left = event.pageX;
					var top = event.pageY;
					
					oDiv.style.left = left + "px";
					oDiv.style.top = top + "px";
				}
			}
			*/
			
			
			/*
			window.onload = function(){
				var oDiv = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					
					var left = event.clientX;
					var top = event.clientY;
					
					oDiv.style.left = left + sl + "px";
					oDiv.style.top = top + st + "px";
				}
			}
			*/
			
//			/*
			window.onload = function(){
				var ul = document.getElementById("ul");
				ul.onclick = function(event){
					// this 指的是触发当前事件的对象, 即ul
					// alert(this);
					
					event = event || window.event;
					// target指的是当前触发事件的对象
					// alert(event.target);
					
					if(event.target.className == "link"){
						console.log(event.target.innerText);
					}
				}
			}
//			*/
			
			
//			window.onload = function(){
//				var span = document.getElementById("span");
//				/*
//				span.addEventListener("click", function(){
//					alert(1);
//				}, false);
//				
//				span.addEventListener("click", function(){
//					alert(2);
//				}, false);
//				
//				span.addEventListener("click", function(){
//					alert(3);
//				}, false);
//				
//				span.attachEvent("onclick", function(){
//					alert(1);
//				});
//				
//				span.attachEvent("onclick", function(){
//					alert(2);
//				});
//				
//				span.attachEvent("onclick", function(){
//					alert(3);
//				});
//				*/
//				
//				bind(span, "click", function(){
//					alert("bind");
//				});
//				
//				window.onkeydown = function(event){
//					event = event || window.event;
//					
//					switch(event.keyCode){
//						case 37:
//							console.log("向左");
//							break;
//						case 38:
//							console.log("向上");
//							break;
//						case 39:
//							console.log("向右");
//							break;
//						case 40:
//							console.log("向下");
//							break;
//					}
//				}
//			}
//			
//			// bind函数设计
//			function bind(obj, eventStr, callback){
//				if(obj.addEventListener){
//					obj.addEventListener(eventStr, callback, false);
//				}else{
//					obj.attachEvent("on" + eventStr, function(){
//						callback.call(obj);
//					});
//				}
//			}
		
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
		<ul id="ul">
			<li><a href="javascript:;" class="link">超链接1</a></li>
			<li><a href="javascript:;" class="link">超链接2</a></li>
			<li><a href="javascript:;" class="link">超链接3</a></li>
		</ul>
		<span id="span">事件的绑定</span>
	</body>
</html>
